<template>
  <!-- 举报 -->
  <el-dialog
    v-model="props.modelValue"
    width="1000px"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ t('blog.dlt1') }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>

    <el-form
      ref="formEl"
      :model="reportForm"
      :rules="reportRules"
      status-icon
    >
      <el-form-item prop="reportType">
        <div class="partition">
          <span>*</span>
          {{ t('blog.dl_l1') }}
        </div>
        <div class="btn-list mt-2">
          <div
            v-for="item in dictData.report_type"
            :class="['item', 'line-1', { active: reportForm.reportType == item.dictValue }]"
            :key="item"
            @click="reportForm.reportType = item.dictValue"
          >
            {{ item.dictLabel }}
          </div>
        </div>
      </el-form-item>

      <el-form-item
        prop="reportInfo"
        class="mt-3"
      >
        <div class="partition mb-2">
          <span>*</span>
          {{ t('blog.dl_l2') }}
        </div>
        <el-input
          type="textarea"
          resize="none"
          :autosize="{ minRows: 6, maxRows: 6 }"
          v-model="reportForm.reportInfo"
          :maxlength="500"
          show-word-limit
        ></el-input>
      </el-form-item>
      <div class="mt-3 partition mb-2">
        {{ t('blog.dl_l3') }}
      </div>
      <div class="mt-2">
        <Uploads
          ref="upload2"
          listType="picture-card"
          @change="setReportFilelist"
          :limit="9"
        ></Uploads>
      </div>
    </el-form>
    <div class="mt-2 mb-2">
      {{ t('blog.dl_l4') }} <span style="color: #394bff"> 《{{ t('blog.dl_l5') }}》</span>
    </div>

    <template #footer>
      <div class="dialog-footer flexcc">
        <el-button
          color="#252628"
          plain
          @click="handleClose"
        >
          {{ t('cancelText') }}
        </el-button>
        <el-button
          type="primary"
          color="#252628"
          @click="reportSub"
        >
          {{ t('blog.dl_b1') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import useDict from '@/hooks/useDict'
import { useI18n } from 'vue-i18n'
import { articleReport } from '@/service/blog.js'
import Uploads from '@/components/Uploads.vue'
import { uploads } from '@/service/common.js'

const { dictData, getDictData } = useDict()
const { t, locale } = useI18n()

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  id: {
    type: [Number, String],
    default: 0
  }
})


const emit = defineEmits(['update:modelValue', 'getData'])

const handleClose = () => {
  emit('update:modelValue', false)
}

const reportFilelist = ref([])
const setReportFilelist = (val) => {
  reportFilelist.value = val
}

const upload2 = ref(null)

// 上传
const handleUpload = (ref, list) => {
  return new Promise((resolve, reject) => {
    const newList = list.value.filter((item) => item.raw)
    const oldList = list.value.filter((item) => !item.raw).map((item) => item.url)

    if (newList.length) {
      const formData = new FormData()
      newList.forEach((item) => {
        formData.append('files', item.raw)
      })
      uploads(formData).then(({ urls }) => {
        const resultFile = urls.split(',')
        list.value = resultFile.map((item) => {
          return {
            name: item.slice(item.lastIndexOf('/') + 1),
            url: item
          }
        })
        ref.value.setFileList(reportFilelist.value)
        resolve([...oldList, ...resultFile])
      })
    } else {
      resolve(oldList)
    }
  })
}

//
const reportForm = ref({})
const reportRules = ref({
  reportType: [{ required: true, message: t('blog.dl_l1'), trigger: 'change' }],
  reportInfo: [{ required: true, message: t('blog.dl_l2'), trigger: 'change' }]
})
const formEl = ref(null)

// 提交
const reportSub = async () => {
  let res = await handleUpload(upload2, reportFilelist)
  if (res.length) {
    reportForm.value.reportScreenshot = res.join()
  }

  if (!formEl.value) return
  formEl.value.validate((valid, fields) => {
    if (valid) {
      let data = {
        ...reportForm.value,
        articleId: props.id,
        customerId: JSON.parse(localStorage.getItem('login')).userInfo.id
      }
      articleReport(data).then(({ msg }) => {
        ElMessage({
          type: 'success',
          message: msg
        })

        handleClose()
        emit('getData')
      })
    }
  })
}

getDictData('report_type')
</script>

<style scoped lang="scss">
.partition {
  font-size: 16px;

  font-weight: bold;
  color: #252628;

  span {
    color: rgba(202, 42, 2, 1);
  }
}

.btn-list {
  width: 100%;
  display: grid;
  // flex-direction: ;
  margin-top: 20px;
  margin-bottom: 20px;
  grid-template-columns: repeat(7, calc(100% / 7 - 9px));
  gap: 10px;

  .item {
    border-radius: 0px;
    background: rgb(250, 198, 185);
    font-size: 12px;
    padding: 0 10px;
    color: #1c1e22;
    border: 1px solid rgb(250, 198, 185);
    text-align: center;
  }

  .active {
    border: 1px solid rgba(202, 42, 2, 1);
    background: rgba(202, 42, 2, 1);
    color: white;
  }
}
</style>
